<template>
	<view class="from-item flex-between" :style="style">
		<slot name="left"></slot>
		<template v-if="icon">
			<m-icon spa="0 24 0 0" size="38" :color="iconColor" :type="icon"></m-icon>
		</template>
		<template v-if="type=='text'">
			<input v-model="str" @input="onChange" :disabled="disabled" :placeholder="placeholder"
				placeholder-class="placeholder">
		</template>
		<template v-if="type=='password'">
			<input v-model="str" type="password" @input="onChange" :disabled="disabled" :placeholder="placeholder"
				placeholder-class="placeholder">
		</template>

		<slot name="right"></slot>
	</view>
</template>
<script>
	export default {
		name: "m-fromItem",
		data() {
			return {
				str: '',
			};
		},
		props: {
			type: {
				type: String,
				default: 'text'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: ""
			},
			//图标颜色
			iconColor: {
				type: String,
				default: "#333"
			},
			border: {
				type: [String, Number],
				default: "1"
			},
			//图标
			icon: {
				type: String,
				default: ""
			},
			value: "",
			bgColor: {
				default: '',
				type: String,
			},
			spa: {
				default: '10 0',
				type: String,
			},
			gap: {
				default: '16 16',
				type: String,
			},
			radius: {
				default: '50',
				type: String,
			},
		},
		watch: {
			value(val) {
				this.str = val
			},
		},
		computed: {
			style() {
				const gap = this.gap.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				const radius = this.radius.split(" ").filter(x => x);
				return {
					'border-bottom-width': this.border + 'rpx',
					background: this.bgColor,
					padding: gap.map(n => `${n}rpx`).join(' '),
					margin: spa.map(n => `${n}rpx`).join(' '),
					borderRadius: radius.map(n => `${n}rpx`).join(' '),
				}
			},
		},
		methods: {
			onChange({ detail: { value } }) {
				this.$emit('input', value);
			}
		},
	}
</script>

<style lang="scss">
	.from-item {
		border-bottom: 2rpx solid var(--border);
		position: relative;
		min-height: 48rpx !important;
		input {
			flex: 1;
			font-size: var(--fs_30);
			color: var(--text);
			font-family: PingFang SC;
			font-weight: 400;
		}


		.placeholder {
			font-size: var(--fs_26);
			color: rgba(51, 51, 51, .6);
		}

		.hint {
			position: absolute;
			left: 0;
			bottom: -50rpx;
			color: var(--error);
			font-size: var(--fs_28);
		}
	}
</style>